<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{margin: 0;padding: 0;}

    html {
        font-size: 48px;
        --iphone-black-bg: #000;
        --iphone-black-text: #f2f2f2;

        --iphone-white-bg: #fff;
        --iphone-white-text: #8b8b99;
        --iphone-white-text-heighlight: #1d1d1f;

        --iphone-red-bg: #960b19;
        --iphone-red-text: #e57571;
        --iphone-red-text-heighlight: #f5f5f7;

        
        --iphone-width: 460px;
        --iphone-offscreen: -720px;

    }
    body {
        margin: 0;
        height: 3000px;
        font-family: Helvetica;
        background-color: #000;
    }
    .sticky-container {
        /* 距离设定的值多少时固定位置  类似顶部导航栏向下滑动时固定位置 --兼容性*/
        position: sticky;
        top: 0;
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }
    .sticky-container .iphone {
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        position: absolute;
        left: 0; top: 0;
    }
    .sticky-container .iphone h3 {
        font-size: 1rem;
        color: #fff;
        margin: 0 0 60px 0;
    }
    .sticky-container .iphone img {
        display: block;
        width: var(--iphone-width);
        margin-bottom: var(--iphone-offscreen);
    }
    .sticky-container .iphone.black {
        background-color: var(--iphone-black-bg);
        z-index: 10;
    }
    .sticky-container .iphone.black h3 {
        color: var(--iphone-black-text);
    }

    .sticky-container .iphone.white {
        background-color: var(--iphone-white-bg);
        z-index: 20;

        clip-path: inset(100% 0px 0px 0px);
    }
    .sticky-container .iphone.white h3 {
        color: var(--iphone-white-text);
    }
    .sticky-container .iphone.white h3 span{
        color: var(--iphone-white-text-heighlight);
    }

    .sticky-container .iphone.red {
        background-color: var(--iphone-red-bg);
        z-index: 30;

        clip-path: inset(100% 0px 0px 0px);
    }
    .sticky-container .iphone.red h3 {
        color: var(--iphone-red-text);
    }
    .sticky-container .iphone.red h3 span{
        color: var(--iphone-red-text-heighlight);
    }

    /* 该区域介绍完成时 还原默认样式 */
    .sticky-container.no-sticky {
        position: relative;
        overflow: visible;
    }

    .sticky-container.no-sticky .iphone {
        position: relative;
    }

    /* 抵消 margin-bottom的距离 */
    .sticky-container.no-sticky .iphone.red {
        padding-bottom: calc(var(--iphone-offscreen) * -1);
    }
</style>
<body>
    <div class="sticky-container">
        <div class="iphone black">
            <h3>
                Comes in black <br>
                &nbsp;
            </h3>
            <img src="https://www.apple.com/v/iphone-se/b/images/overview/finishes_black__b06syayq94wi_medium_2x.png" alt="">
        </div>
        <div class="iphone white">
            <h3>
                Comes in black. <br>
                <span>White</span>
            </h3>
            <img src="https://www.apple.com/v/iphone-se/b/images/overview/finishes_white__drv9fwq9vzwy_medium_2x.png" alt="">
        </div>
        <div class="iphone red">
            <h3>
                Comes in black. <br>
                White<span>And Pow.</span>
            </h3>
            <img src="https://www.apple.com/v/iphone-se/b/images/overview/finishes_red__eqfv1ongy282_medium_2x.png" alt="">
        </div>

    </div>
</body>

<script>
    window.addEventListener('scroll', e => {
        // 每屏都是 100vh 
        let noStickyOffset = document.documentElement.clientHeight * 2;
        let scrollTop = document.documentElement.scrollTop;
        let scrollHeight = document.documentElement.scrollHeight;
        let clientHeight = document.documentElement.clientHeight;
        // 得出0 - 1之间的取值
        let scrollEnd = scrollTop / noStickyOffset;
        let $white = document.querySelector('.white');

        let $red = document.querySelector('.red');


        // 滚动0 - 50% 显示白色iphone
        $white.style.clipPath = `inset(${((0.5 - scrollEnd) / 0.5) * 100}% 0px 0px 0px)`


        // 滚动50% - 100% 时 显示红色

        $red.style.clipPath = `inset(${((1 - scrollEnd) / 0.5) * 100}% 0px 0px 0px)`;

        // 滚动到底部时删除Stick属性

        if(scrollEnd >= 1) {
            document.querySelector('.sticky-container').classList.add('no-sticky')
        } else {
            document.querySelector('.sticky-container').classList.remove('no-sticky')
        }
    })
</script>
</html>